<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport"
        content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
        <link rel="stylesheet" href="<?php echo base_url().'public/home/' ?>css/general.css">
    <script src="<?php echo base_url().'public/home/' ?>js/jquery-2.0.3.min.js"></script>
    <!-- 日期选择控件 -->
    <script src='<?php echo base_url().'public/home/mobile_date/' ?>jdate.min.js'></script>
    <!-- 下拉框 -->
    <?php include_once "public/home/html/mobile_select.php"  ?>
    <title>信息反馈列表</title>
</head>
<style>
    .top {
        width: 100%;
        height: 50px;
        margin-top: 0.1%;
        background-color: #fff;
    }

    .top form {
        padding-top: 4%;
        padding-left: 4%;
        padding-right: 4%;
    }

    .top form table {
        width: 100%;
    }

    .user {
        appearance: none;
        border: 0;
        color: #797979;
        background-color:#fff
        /* background-image: url(../images/drop_down.png);
        background-position: 35px 4px;
        background-size: 21%;
        background-repeat: no-repeat; */
    }

    .min {
        height: auto;
        margin: 5%;
       
    }

    .fk {
        width: 100%;
        height: auto;
        border-radius: 4px;
        background-color: #fff;
        margin-bottom: 5%;
    }

    .number{
        margin-left: 5%;
    }

    .fk p {
        display: inline;
    }

    .jg {
        margin-top: 5%;
        margin-bottom: 2%;
        margin-left: 5%;
        font-size: 18px;
    }

    .tet {
        line-height: 22px;
        color: #838383;
        font-size: 8px;
        margin-right: 3%;
    }

    .setting_down {
        width: 40px;
        height: 25px;
        line-height: 25px;
        color: #3577F7;
        font-size: 8px;
        background-color: #fff;
        border-style: none;
        margin-left: 75%;
        transform: translate(81%, -10%);
        
    }
    .loading{
    text-align: center;
}
.tip{
    width: 100%;
    text-align: center;
    color: #5d5d5d;
    height: 50px;
}
.filter-item input{
    width: 75%;
    float: left;
    border: none;
    margin-top: 4px;
    color: #797979;
    overflow:hidden;
      text-overflow: ellipsis;
      white-space:nowrap;
      text-align: center;
      margin-right: 5px;
}
.filter-item img{
    width: 13px;
    float: left;
    margin: 8px 0 0 0;
}
.filter{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
}
.filter div{
    float: left;
}
a{
    text-decoration:none;
    color:#3577F7;
}
/* #limittext{
width:640px;
height:auto;
position:relative;
background-color:#ccc;
color:black;
}
.switch{
font-size:12px;
text-align:center;
cursor:pointer;
font-family:Verdana;
font-weight:800;
position:absolute;
bottom:0;
width:100%;
/*background:url(more-bg.png) repeat-x bottom;*/
/*height:40px;
line-height:80px;
} */
</style>

<body>

    <div class="top">
    <input type="hidden" name="url" id="url"value="<?php echo base_url() ?>">
    <input type="hidden" name="admin_id" id="admin_id"value="<?php echo $_SESSION[SESS_USER_HOME]['id'] ?>">
    <div class='filter'>
            <div class="filter-item">
                <input type="text" id="date" onchange="getList(true)" value="" placeholder="选择日期"><img src="<?php echo base_url().'public/home/' ?>images/drop_down.png" alt="">
            </div>
            
            <!-- 管理员显示 -->
            <?php if($identity==1):?>
            <div class="filter-item">
                <input type="text" id="dept" onchange="getList(true)" placeholder="选择部门" readonly><img src="<?php echo base_url().'public/home/' ?>images/drop_down.png" alt="">
            </div>
            <?php endif?>
        </div>
    </div>
    <div class="min" id="min">
        
    </div>
    <div class="loading" style="text-align:center;"><img src="<?php echo base_url().'public/home/' ?>images/loading1.gif"></div>
        <div class="tip" style="display: none;">到底了,没有数据了~</div>





<script>

    let html = '';
    let admin_id = $('#admin_id').val();
    let pageNo = 1;
    let pageSize = 20;
    let have = true;
    // let created = $('#created').val()
    // console.log(created);

    $(function () {
        console.log(pageNo);
        console.log(pageSize);
        getList();
        getOption()
        // 初始化日期控件
        new Jdate({
			  el: '#date',
			  format: 'YYYY-MM-DD',
			  beginYear: 2019,
			  endYear:  new Date().getFullYear(),              
				confirm: function(date) {
					$("#date").val(date)
                    getList(true)
				},
			})

            //分页
        $(window).scroll(function(){
            // scroll at bottom
            if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                pageNo++;
                getList()
            }
        });


        
    //     $('body').on('click', '.btnCol', function() {
    //         let text = $(this).text();
            
    //         if(text == '收缩') {
    //             $(this).text('展开')
    //         } else {
    //             $(this).text('收缩')
    //         }
    //     })
    })
    // // 时间筛选
    // function changeCreated(){
    //     created = $('#created').val();
    //     getList();
    // }

    function getList(change=false){

        
        if(change){
            pageNo=1
            have=true
            $("#min").html('')
        }
        var date=$("#date").val() 
        if($("#date").val()=='请选择日期'){
            date='';
        }       
        // console.log(date); 
        // console.log(have);
        // $('.min').empty();
        if(have){
            $.ajax({
                url: $("#url").val()+"/Home/Attend/feedbackList",
                dataType: "json",
                type: "post",
                data: {
                    pageNo: pageNo,
                    pageSize: pageSize,
                    admin_id: $("#admin_id").val(),
                    dept_name:$("#dept").val(),
                    created:date,
                },
                // async:false,
                success: function (data) {
                    let t = JSON.parse(data.v);
                    console.log(t);
                    

                    //if判断有无数据
                    if(status = true){

                        if(t.count==0){
                            $(".loading").hide();
                            $(".tip").show();
                        }
                    
                        $.each(t.ret, function (k, v) {
                        let a = (pageNo-1)*pageSize+(k+1) + '.' ;

                        // console.log(v);
                         html +=`<div class="fk">
                                      <div style="padding-top: 5%;margin-bottom: 5%;font-size: 20px;">
                                      <span  class="number"><p class="snumber">${a}</p></span>
                                      <span><p id="section">${v.dept_name}</p></span>
                                      </div>
                                      <div style="border-top: 1px solid #d4d4d4;border-bottom: 0;border-left: 0;border-right: 0;"></div>
                                      <div style="margin:10px 0 10px 0;font-size: 18px;"><span style="margin-left: 5%;">反馈人：<p id="people">${v.username}</p></span>
                                      <span style="float:left"><p id="type">${v.category}</p></span>
                                      </div>
                                      <div style="border-top: 1px solid #d4d4d4;border-bottom: 0;border-left: 0;border-right: 0;"></div>
                                      <div class="jg">
                                      <div>反馈内容</div>
                                      <div class="limittext">
                                      <div class="test" style="display: inline;color: #838383;font-size: 18px;">${v.content}</div>
                                      
                                      </div>
                                      </div>
                                      <div class="jg" style="padding-bottom: 3%;">反馈时间：<p id="dataso">${v.created}</p>
                                      </div>
                                    </div>`
                                      
                                    
                        // 判断是否还有数据
                        if( pageNo==t.totalPage){
                            have=false
                            $(".loading").hide();
                            $(".tip").show();
                        }
                        // $('.min').append(html);
                    });
                    $('.min').append(html);
                    html = '';
                    
                    $(".test").each(function(){
                        var maxwidth=50;//设置最多显示的字数
                        var text=$(this).text();
                          if($(this).text().length>maxwidth){
                             $(this).text($(this).text().substring(0,maxwidth));
                             $(this).html($(this).html()+"..."+"<a href='###' > 展开</a>");//如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接；

                            };
                             $(this).find("a").click(function(){
				
                                   $(this).parent().text(text);//点击“点击展开”，展开全文
                             })
                     })

                    
                    // $.each(t.ret, function (k, v) {
                    //     console.log(v);
                    //     let a = (pageNo-1) * pageSize + k ;
                    //     console.log(a);
                    //                 var p = document.getElementsByClassName("tet")[a];
                    //                 console.log(p);
                    //                 var btn = document.getElementsByTagName("a")[a];
                    //                 //拿到所有文字
                    //                 var str = p.innerHTML;
                    //                 //设置一个开关，记录展开和收缩
                    //                 var isOn = true;
                    //                 //btn添加事件，在事件里修改span文字
                    //             //     btn.onclick = function () {
                    //             //         //点击按钮的时候改变开关的值
                    //             //         isOn = !isOn;
                    //             //         if (isOn == true) {
                    //             //             p.innerHTML = str;
                    //             //             btn.innerHTML = "收缩";
                    //             //             } else {
                    //             //                 //收缩
                    //             //                 p.innerHTML = str.substring(0, 30) + "...";
                    //             //                 btn.innerHTML = "展开";
                    //             //         }
                    //             // }
                    // })
                    

                  }else if(status = false){//无数据时显示
                      
                    $(".loading").hide();
                    $(".tip").show();
                    } 
                   
                },
            });
        }
    }


    function detail (aid){
        console.log(aid);
        window.location.href = `<?php echo base_url() . 'Home/Attend/details/'?>${aid}`;
    }
    // 获取筛选项
    function getOption(){
        $.ajax({
            type: "post",
            url: $("#url").val()+"Home/Attend/feedbackScreen",
            dataType: "json",
            success: function (data) {
                var t=JSON.parse(data.v)
                console.log(t);

                new MobileSelect({
                    trigger: '#dept',
                    title: '请选择部门',
                    wheels: [
                                {data: t.dept_name}
                            ],
                    callback:function(indexArr, data){
                        $("#dept").val(data)
                        getList(true)
                    }
                });

            }
        });
    }
</script>



</body>

</html>